<template>
  <view class="content">
    <view class="content">
      <view class="bgmImg content">
        <image v-if="isPlay" class="playBgm" :src="StaticUrl+'/image/detection/fast/icon_bgm_play.png'"
               mode="widthFix" @click="changeMusicStatus()"></image>
        <image v-else :src="StaticUrl+'/image/detection/fast/icon_bgm_pause.png'" mode="widthFix"
               @click="changeMusicStatus()"></image>
      </view>

      <view class="brainView">
        <image v-if="adornStateL" class="electrode_up_l"
               :src="StaticUrl+'/image/detection/fast/icon_ele_up_l.png'" mode="widthFix"></image>
        <image v-else class="electrode_up_l" :src="StaticUrl+'/image/detection/deep/icon_up_L_r.png'"
               mode="widthFix"></image>

        <image v-if="adornStateR" class="electrode_up_r"
               :src="StaticUrl+'/image/detection/fast/icon_ele_up_r.png'" mode="widthFix"></image>
        <image v-else class="electrode_up_r" :src="StaticUrl+'/image/detection/deep/icon_up_R_r.png'"
               mode="widthFix"></image>

        <image v-if="adornStateL" class="electrode_down_l"
               :src="StaticUrl+'/image/detection/fast/icon_ele_down_l.png'" mode="widthFix"></image>
        <image v-else class="electrode_down_l" :src="StaticUrl+'/image/detection/deep/icon_down_L_r.png'"
               mode="widthFix"></image>

        <image v-if="adornStateR" class="electrode_down_r"
               :src="StaticUrl+'/image/detection/fast/icon_ele_down_r.png'" mode="widthFix"></image>
        <image v-else class="electrode_down_r" :src="StaticUrl+'/image/detection/deep/icon_down_R_r.png'"
               mode="widthFix"></image>
      </view>
      <view>
        <image style="width: 663rpx;" :src="StaticUrl+'/image/detection/fast/img_body.png'" mode="widthFix">
        </image>
      </view>
      <view class="countDownView content">
        <text>{{ timingText }}</text>
        <text>检测时请尽量保持安静状态</text>
      </view>
      <view class="progressView">
        <ProgressBar :Width="percent" Type="candy" :Vice="false"></ProgressBar>
        <view class="progressDotView content" :style="{left: iconML + 'rpx'}">
          <view class="progressDotView_text">
            <text>{{percent}}%</text>
          </view>
          <image :src="StaticUrl+'/image/detection/fast/icon_prgLogo.png'" mode="widthFix"></image>
        </view>
      </view>
    </view>


    <!-- 和头环连接中断 -->
    <uni-popup ref="popup1" :mask-click="false" :safe-area="false" type="dialog">
      <view class="popup1">
        <image class="icon_close" :src="StaticUrl+'/image/icon_close.png'" @click="closePopup()"></image>
        <image class="icon_content" :src="StaticUrl+'/image/detection/icon_bluetooth.png'"></image>
        <view class="content">
          <text class="popup1Content">连接失败</text>
          <text class="popup1Content">与头环连接中断</text>
        </view>
        <view class="popupBottomView content" @click="closePopup()"><text>我知道了</text></view>
      </view>
    </uni-popup>
    <!-- 是否退出检测 -->
    <uni-popup ref="popup2" :mask-click="false" :safe-area="false" type="dialog">
      <view class="popup1">
        <image class="icon_content" :src="StaticUrl+'/image/detection/icon_detection.png'"></image>
        <view class="content">
          <text class="popup1Content">正在检测</text>
          <text class="popup1Content">请问是否需要退出</text>
        </view>
        <view class="popup_bottomView">
          <view class="popup_bottomViewitem content" style="border-radius:0 0 0 15px;background-color: #F5F5F5;" @click="cancel()"><text
              style="color: #333333;">取消</text></view>
          <view class="popup_bottomViewitem content"
                style="background-color: #0659C7;border-radius:0 0 15px 0;" @click="enter()">
            <text style="color: #FFFFFF;">确定</text>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 是否为本人-->
    <uni-popup ref="isSelfPopup" :mask-click="false" :safe-area="false" type="dialog">
      <view class="popup1">
        <image class="icon_content" :src="StaticUrl+'/image/iconPopup/icon_unusual.png'"></image>
        <view class="content">
          <text class="popup1Content">您本次检测数据异常</text>
          <text class="popup1Content">是否为本人佩戴</text>
        </view>
        <view class="popup_bottomView">
          <view class="popup_bottomViewitem content"
                style="border-radius:0 0 0 15px;background-color: #F5F5F5;" @click="hasSelf(false)">
            <text style="color: #333333;">否</text>
          </view>
          <view class="popup_bottomViewitem content"
                style="background-color: #FF4D4D;border-radius:0 0 15px 0;" @click="hasSelf(true)">
            <text style="color: #FFFFFF;">是</text>
          </view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="exitMonitor" :mask-click="false" :safe-area="false" type="dialog">
      <view class="popup1">
        <image class="icon_content" :src="StaticUrl+'/image/iconPopup/icon_exit.png'"></image>
        <view class="content">
          <text class="popup1Content">检测到多次数据异常</text>
          <text class="popup1Content">请您调整头环后</text>
          <text class="popup1Content">重新开始检测</text>
        </view>
        <view class="popupBottomView content" @click="enter()"> <text>确定</text></view>
      </view>
    </uni-popup>
    <!-- 头环未佩戴是否退出检测 -->
    <uni-popup ref="notWearingPopup" :mask-click="false" :safe-area="false" type="dialog">
      <view class="popup1">
        <image class="icon_content" :src="StaticUrl+'/image/iconPopup/icon_notWear.png'"></image>
        <view class="content">
          <text class="popup1Content">检测到{{notWearingPosition==0?'左侧':'右侧'}}头环未佩戴</text>
          <text class="popup1Content">是否继续检测</text>
        </view>
        <view class="popup_bottomView">
          <view class="popup_bottomViewitem content" style="border-radius:0 0 0 15px;background-color: #F5F5F5;" @click="wetherDetection(false)"><text
              style="color: #333333;">取消</text></view>
          <view class="popup_bottomViewitem content"
                style="background-color: #0659C7;border-radius:0 0 15px 0;" @click="wetherDetection(true)">
            <text style="color: #FFFFFF;">确定</text>
          </view>
        </view>
      </view>
    </uni-popup>
    <annoyFree-popup ref="annoyPopup" :icon_src="icon_src" @btnEvent="btnEvent"></annoyFree-popup>
  </view>
</template>

<script>
const app = getApp();
import * as api from '@/api/login';
import util from '../../../utils/utils.js';
import {
  mapState
} from 'vuex'; //引入mapState
import ProgressBar from '@/components/Progress-Bar/Progress-Bar';
import config from "@/config.js"

// 定义变量 const
var bloodL = new Array(); //左脑血流数据（500个float长度）
var bloodR = new Array(); //右脑血流数据（500个float长度）

export default {
  data() {
    return {
      StaticUrl: config.StaticUrl,
      percent: 0,
      isPlay: true,
      timingTimer: null, //正计时器
      showPercentTimer: null, //显示圆环的定时器
      time: 0,
      iconML: -28,
      timingText: '00:00',
      audioBgmContext: null,
      audioTipContext: null,
      requestReportTime: null, //最后请求报告的定时器
      alarmTimer: null,
      icon_src: '', //弹窗的图标
      alreadyPopup: false, //断开弹窗是否已经显示
      audioTimer: null, //用于切换音频的定时器
      vainDataCount: 0,
      adornStateL: true,
      adornStateR: true,
      popupCount: 0,
      isLeftData: true,
      recvBuffer: [],
      fastCheckResult: null,
      musicSrc: 'https://xch.jseihc.com/public/platform/userApp/static/audio/wechatAudio.mp3', //背景音乐地址
      notWearingPosition: 0
    };
  },
  components: {
    ProgressBar
  },
  computed: {
    ...mapState({
      isConnected: function(state) {
        return state.isConnected;
      }
    })
  },
  // 监听本地数据变化
  watch: {
    // 监听蓝牙连接状态
    isConnected: {
      handler(newValue, oldValue) {
        console.log(newValue);
        if (!newValue) {
          this.$refs.popup1.open('center');
          console.log('蓝牙断开连接了');
        }
      }
    }
  },
  onLoad() {
    this.$toast('请您调整手机音量');
    let that = this;
    uni.$on('originalData', function(data) {
      let array = Array.prototype.slice.call(new Uint8Array(data.msg));
      that.recvPackage(array);
    });
    this.resetData();
    let music = uni.getStorageSync('backgroundMusic');
    let musicSrc = '';
    if (!music) {
      if (app.globalData.platform == "ios") {
        musicSrc = that.$config.StaticUrl + '/audio/fastMonitor/' + encodeURIComponent('雨后阳光.mp3');
      } else {
        musicSrc = that.$config.StaticUrl + '/audio/fastMonitor/雨后阳光.mp3';
      }
    } else {
      if (app.globalData.platform == "ios") {
        music = encodeURIComponent(music)
      }
      musicSrc = that.$config.StaticUrl + '/audio/fastMonitor/' + music;
    }
    this.musicSrc = musicSrc;

    let Timer = setTimeout(() => {
      clearTimeout(Timer)
      that.startMonitor()
    }, 300)
  },
  onShow() {
    uni.setKeepScreenOn({
      keepScreenOn: true
    })
  },
  onHide() {
    uni.setKeepScreenOn({
      keepScreenOn: false
    })
  },
  onUnload() {
    console.log('onUnload');
    // 销毁音乐实例
    clearTimeout(this.alarmTimer)
    clearInterval(this.requestReportTime);
    clearInterval(this.showPercentTimer);
    clearInterval(this.timingTimer);
    clearTimeout(this.audioTimer);
    if(this.audioTipContext != null) this.audioTipContext.destroy();
    if(this.audioBgmContext != null) this.audioBgmContext.destroy();
    app.writeBLEState(2)
    let t = setTimeout(() => {
      clearTimeout(t)
      app.writeBLEState(26)
    }, 100)
    // 此处应该emit一个事件 ，如果 头环断开连接了，那么主页的弹窗就不用显示了
    uni.$emit('alreadyPopup', this.alreadyPopup);
    uni.$off('originalData');
  },
  methods: {
    startMonitor() {
      let that = this;
      console.log('START');
      this.audioTipContext = uni.createInnerAudioContext();
      this.audioTipContext.src = this.StaticUrl + '/audio/fastMonitorTips/guide.mp3';
      this.audioTipContext.play();
      that.audioTimer = setTimeout(() => {
        that.audioBgmContext = uni.createInnerAudioContext();
        that.audioBgmContext.loop = true;
        that.audioBgmContext.src = that.musicSrc;
        that.audioBgmContext.play();
        clearTimeout(that.audioTimer);
        app.writeBLEState(25)
        this.startTiming()
        let t = setTimeout(() => {
          clearTimeout(t)
          app.writeBLEState(23)
        }, 500)
      }, 16000)
    },
    // 开始计时
    startTiming() {
      var that = this;
      this.showPercent()
      let min, sec;
      that.timingTimer = setInterval(() => {
        let count = that.time;
        min = parseInt((count / 60) % 60);
        sec = parseInt(count % 60);
        that.timingText = that.$utils.toDouble(min) + ':' + that.$utils.toDouble(sec);
        that.time++;
      }, 1000);
    },
    // 显示圆环进度， 2秒钟加一，直到99% ，等待服务器接受到数据
    showPercent() {
      let that = this
      that.showPercentTimer = setInterval(() => {
        if (that.percent < 90) {
          that.percent++;
        } else {
          clearInterval(that.showPercentTimer)
        }
        that.iconML = parseInt((that.percent) * 5 - 28)
      }, 2000);
    },
    /**
     * 接收数据包 先组合成整包，而后在校验
     * 1.根据0x68 获取后续完整报文 当接收到16时 开启校验（长度 crc）
     */
    async recvPackage(array) {
      try {
        this.recvBuffer.push(...array)
        while (array.length >= 7) {
          let retVal = await this.checkPackage()
          if (retVal) {
            this.checkFormat(retVal)
          } else {
            break
          }
        }
      } catch (e) {
        console.log('checkPackage fail', e);
      }
    },
    //组合成一个完整的数据
    checkPackage() {
      return new Promise((resolve) => {
        let buffer = this.recvBuffer
        for (let i = 0; i < buffer.length; i++) {
          if (buffer[i] === 0x68) {
            let lenBytes = [buffer[i + 1], buffer[i + 2]]
            let packLen = util.BytesToIntBigEndian(lenBytes)
            if (packLen <= buffer.length) {
              if (buffer[i + packLen - 1] === 0x16) {
                let totalData = buffer.splice(i, packLen)
                return resolve(totalData)
              }
            }
          }
        }
      })
    },
    //检查报文格式
    checkFormat(array) {
      if (array[0] == 0x68 && array[array.length - 1] === 0x16) {
        let crcContent = array.slice(1, -3)
        let crc16 = util.crc16_false(crcContent)
        if (array[array.length - 3] === crc16[0] && array[array.length - 2] === crc16[1]) {
          if (array[3] === 0x01 || array[3] === 0x02) this.analyticFastData(array)
          if (array[3] === 0x27 || array[3] === 0x28) this.checkBaseWaveException(array[3]===0x27)
        }
      }
    },
    checkBaseWaveException(flag){
      app.writeBLEState(26)
      this.$refs.notWearingPopup.open('center')
      let _src = ''
      if(flag) {
        this.adornStateL = false
        this.notWearingPosition = 0
        _src = this.$config.StaticUrl + '/audio/fastMonitorTips/notWearingL.mp3'
      } else {
        this.adornStateR = false
        this.notWearingPosition = 1
        _src = this.$config.StaticUrl + '/audio/fastMonitorTips/notWearingR.mp3'
      }
      let innerAudio = uni.createInnerAudioContext();
      innerAudio.src = _src
      innerAudio.play()
      let t = setTimeout(() =>{
        clearTimeout(t)
        innerAudio.destroy()
      },5000)
    },
    //是否继续检测
    wetherDetection(flag){
      this.$refs.notWearingPopup.close()
      if(flag) {
        app.writeBLEState(25)
        let t = setTimeout(() =>{
          clearTimeout(t)
          if(this.notWearingPosition == 0) {
            app.writeBLEState(23)
            this.adornStateL = true
          } else {
            app.writeBLEState(24)
            this.adornStateR = true
          }
        },1000)
        this.audioBgmContext.play();
      }else {
        uni.switchTab({
          url:'../detection'
        })
      }
    },
    async analyticFastData(array) {
      console.log('快速报文>>', array[3]);
      let decode_front = array.slice(4, -3);
      let decode_later = util.Data_Decrypt(decode_front, decode_front.length);
      this.isLeftData = array[3] === 0x01;
      let total_last10 = 0,
          checkWaveData = [];
      for (let i = 0; i < 2100; i++) {
        let bdata = util.convertFloat(decode_later.slice(i * 4, i * 4 + 4).reverse())
        checkWaveData.push(bdata)
        if (i > 2090 && i < 2099) {
          total_last10 += bdata
        } else if (i == 2099) {
          let baseImpedance = total_last10 / 10
          if (baseImpedance > 1000 || baseImpedance < 0) {
            if (this.isLeftData) this.adornStateL = false;
            if (!this.isLeftData) this.adornStateR = false;
            let t = setTimeout(() => {
              this.adornStateL = true
              this.adornStateR = true
              clearTimeout(t)
            }, 5000)
          }
        }
      }
      if (this.isLeftData) bloodL.push(...checkWaveData)
      if (!this.isLeftData) bloodR.push(...checkWaveData)
      // try {
      let res = await this.checkWave(checkWaveData, this.isLeftData)
      if (!res) {
        console.log('checkWave fail...');
        return;
      }
      if (this.vainDataCount >= 2) {
        this.reCheck()
        return
      }
      if (bloodL.length === 2100 && bloodR.length === 2100) {
        console.log('single data enough');
        this.percent = 90
        // 数据满足，如果没建模就去建模
        if (!this.$store.state.isBuildModel) {
          this.createUserModel()
        } else {
          this.sendMsg2Server(bloodL, bloodR);
        }
      }
      // } catch (e) {
      // 	console.log('analyticFastData =>', e);
      // }

    },
    createUserModel() {
      let that = this;
      let data = {
        userId: this.$store.state.userInfo.currentUser.userId,
        action: 'createUserModel',
        params: {
          left: bloodL,
          right: bloodR
        }
      };
      api.createUserModel(data).then(function(res) {
        console.log('createUserModel success', res);
        that.$store.commit('isBuildModel', res.data.success);
        if (res.data.success) that.sendMsg2Server(bloodL, bloodR);
      }).catch(function(error) {
        console.log('fastCheck fail', error);
      });
    },
    //告警语音
    alarmVoice(src,flag) {
      this.audioBgmContext.stop();
      console.log('alarm 调用了...');
      this.audioTipContext.src = src;
      this.audioTipContext.play();
      if(flag) {
        this.alarmTimer = setTimeout(() => {
          clearTimeout(this.alarmTimer)
          this.audioBgmContext.play();
        }, 10000)
      }
    },
    //检查波形质量
    checkWave(wave, flag) {
      return new Promise((resolve, reject) => {
        let that = this;
        let data = {
          userId: this.$store.state.userInfo.currentUser.userId,
          action: 'checkWave',
          params: {
            wave,
            frequency: 50
          }
        };
        api.checkWave(data).then(function(res) {
          console.log('checkWave success', res);
          if (res.data.success) {
            if (res.data.data.waveQuality < 0.2) {
              if (flag) {
                console.log('only voice');
                bloodL = []
                if (that.vainDataCount == 0) that.alarmVoice(that.StaticUrl +
                    '/audio/fastMonitorTips/dataExceptionL.mp3',true)
              }
              if (!flag) {
                bloodR = []
                if (that.vainDataCount == 0) that.alarmVoice(that.StaticUrl + '/audio/fastMonitorTips/dataExceptionR.mp3',true)
              }
              that.vainDataCount++
            } else {
              that.vainDataCount = 0
              that.popupCount = 0
              if (flag) {
                app.writeBLEState(2)
                let t = setTimeout(() => {
                  clearTimeout(t)
                  app.writeBLEState(24)
                }, 1000)
              }
            }
            return resolve(true)
          } else {
            return resolve(false)
          }
        }).catch(function(error) {
          reject('error-', error)
        });
      })
    },
    // 发送消息给服务器
    sendMsg2Server(waveL, waveR) {
      let that = this;
      let data = {
        userId: this.$store.state.userInfo.currentUser.userId,
        action: 'fastCheck',
        params: {
          left: [waveL],
          right: [waveR]
        }
      };
      api.fastCheck(data).then(function(res) {
        console.log('res success', res);
        if (res.data.success) {
          that.fastCheckResult = res.data.data.fastCheckResult
          app.writeBLEState(2)
          if (res.data.data.fastCheckResult.stable > 0.5) {
            that.$refs.isSelfPopup.open('center');
          } else {
            that.saveReport()
          }
        } else {
          if (res.data.data.state == '数据异常') {
            that.reCheck();
          }
        }
      }).catch(function(error) {
        console.log('fastCheck fail', error);
      });
    },
    // 确认是否是本人
    hasSelf(flag) {
      this.$refs.isSelfPopup.close();
      if (flag) {
        this.saveReport()
      } else {
        uni.switchTab({
          url: '../detection'
        });
      }
    },
    // 告知服务器 保存数据
    saveReport() {
      let that = this;
      let data = {
        userId: this.$store.state.userInfo.currentUser.userId,
        action: 'saveReport',
        params: that.fastCheckResult
      };
      api.saveReport(data).then(function(res) {
        console.log('saveReport success', res);
        if (res.data.success) {
          if (that.audioBgmContext != null) that.audioBgmContext.destroy();
          if (that.audioTipContext != null) that.audioTipContext.destroy();
          that.$store.commit('isLoopCheckConnectState',true)
          uni.redirectTo({
            url: '../fastReport/fastReport?report=' + JSON.stringify(that.fastCheckResult
                .report) + '&isHistory=' + false
          })
        }
      }).catch(function(error) {
        console.log('saveReport fail', error);
      });
    },
    reCheck() {
      app.writeBLEState(2)
      this.popupCount++
      if (this.popupCount > 3) {
        this.alarmVoice(this.StaticUrl + '/audio/fastMonitorTips/exitMonitor.mp3',false)
        this.$refs.exitMonitor.open('center');
        this.audioBgmContext.destroy()
        return
      }
      if (this.isLeftData) this.alarmVoice(this.StaticUrl + '/audio/fastMonitorTips/datasExceptionL.mp3',false);
      if (!this.isLeftData) this.alarmVoice(this.StaticUrl + '/audio/fastMonitorTips/datasExceptionR.mp3',false);
      this.vainDataCount = 1
      let content = {
        text1: '请您调整头环',
        text2: '保持安静',
        text3: '继续检测',
        btn_text: '继续检测'
      };
      this.icon_src = this.StaticUrl + '/image/iconPopup/icon_quiet.png'
      this.$refs.annoyPopup.openPopup(content, 'center');
    },
    btnEvent(e) {
      this.audioBgmContext.play()
      this.$refs.annoyPopup.closePopup();
      // this.resetData();
      if (bloodL.length == 0) {
        app.writeBLEState(23)
      } else {
        app.writeBLEState(24)
      }
    },
    // 关闭弹出层
    closePopup() {
      this.alreadyPopup = true;
      this.$refs.popup1.close();
      uni.switchTab({
        url: '../detection'
      });
    },
    // 关闭 / 打开音乐
    changeMusicStatus: function() {
      this.isPlay = !this.isPlay
      if (this.isPlay) {
        this.audioBgmContext.play()
      } else {
        // this.audioBgmContext.onPause(function(res) {
        // 	console.log('音乐结束了');
        // });
        this.audioBgmContext.pause()
        this.audioBgmContext.offPause(function(res) {})
      }
    },
    // 取消tuichu
    cancel() {
      this.$refs.popup2.close();
    },
    onBackPress(options) {
      console.log('onBackPress: ',options);
      let that = this;
      that.$refs.popup2.open('center');
      return true;
    },
    // 确定tuichu
    enter() {
      let that = this;
      // send停止检测报文
      // 销毁音乐实例
      this.audioBgmContext.destroy();
      this.audioTipContext.destroy();
      let t = setTimeout(() => {
        clearTimeout(t)
        uni.switchTab({
          url: '../detection'
        });
      }, 500)
    },
    // #ifdef MP-WEIXIN
    // 判断是否开始检测，状态位
    enableAlertBeforeUnload() {
      console.log('监听小程序返回事件');
      let that = this;
      // if(this.isStart){
      wx.enableAlertBeforeUnload({
        message: '您确定退出此次检测?',
        success: function(res) {
          console.log('返回');
        },
        fail: function(err) {
          console.log('取消!');
        }
      });
      // }
    },
    // #endif
    // 重置所有数据
    resetData() {
      this.percent = 0;
      bloodL = new Array(); //左脑血流数据（500个float长度）
      bloodR = new Array(); //右脑血流数据（500个float长度）
    }
  }
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bgmImg {
  margin-top: 40rpx;
  width: 670rpx;
  align-items: flex-end;
}

.bgmImg image {
  width: 56rpx;
  height: 56rpx;
}

.playBgm {
  animation: bgmImg 5s linear infinite;
}

@keyframes bgmImg {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.brainView {
  margin-top: 50rpx;
  width: 280rpx;
  height: 331rpx;
  position: relative;
  background-image: url('https://xch.jseihc.com/public/platform/userApp/static/image/detection/fast/img_brain.png');
  background-size: 100% 100%;
  justify-content: flex-start;
}

:root {
  --margin_border: 0rpx;
}

.electrode_up_l {
  position: absolute;
  top: 110rpx;
  left: var(--margin_border);
  width: 15rpx;
}

.electrode_up_r {
  position: absolute;
  top: 110rpx;
  right: 0;
  width: 15rpx;
}

.electrode_down_l {
  position: absolute;
  bottom: 42rpx;
  left: 28rpx;
  width: 21rpx;
}

.electrode_down_r {
  position: absolute;
  bottom: 42rpx;
  right: 28rpx;
  width: 21rpx;
}

.countDownView text:nth-child(1) {
  margin-top: 50rpx;
  font-size: 80rpx;
  font-weight: bold;
  color: #0659c7;
}

.countDownView text:nth-child(2) {
  margin-top: 30rpx;
  font-size: 28rpx;
  font-weight: normal;
  color: #0659c7;
}

.progressView {
  position: relative;
  margin-top: 100rpx;
  width: 500rpx;
}

.progressDotView {
  position: absolute;
  top: -46rpx;
  z-index: 10;
}

.progressDotView_text {
  width: 56rpx;
  height: 34rpx;
  background-image: url('https://xch.jseihc.com/public/platform/userApp/static/image/detection/fast/icon_prgBg.png');
  background-size: 100% 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.progressDotView_text text {
  /* margin-top: 2rpx; */
  color: #fff;
  font-size: 20rpx;
}

.progressDotView image {
  margin-top: 3rpx;
  width: 56rpx;
}

/* 弹窗 */

.popup1 {
  width: 620rpx;
  height: 750rpx;
  background-color: white;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.icon_content {
  margin-top: 93rpx;
  width: 238rpx;
  height: 238rpx;
}

.popup1Content {
  margin-top: 20rpx;
  font-size: 52rpx;
  font-family: Source Han Sans CN;
  font-weight: normal;
  color: #333333;
}

/* popup 底部两个按钮区域 */
.popup_bottomView {
  width: 100%;
  height: 137rpx;
  border-top: #333333;
  /* border: 1px #323233 solid; */
  border-radius: 0 0 15px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popup_bottomViewitem {
  width: 50%;
  height: 100%;
  font-size: 44rpx;
  font-family: Source Han Sans CN;
  font-weight: normal;
}

.icon_close {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  top: 26rpx;
  right: 35rpx;
}

.popupBottomView {
  margin-bottom: 0rpx;
  width: 100%;
  height: 120rpx;
  border-radius: 0 0 15px 15px;
  background-color: #0659c7;
}

.popupBottomView text {
  font-size: 44rpx;
  font-family: Source Han Sans CN;
  font-weight: normal;
  color: #ffffff;
}
</style>